<template>
  <div class="bg-[#fff] rounded-lg px-[15px] pt-5 mt-5 container">
    <div class="flex justify-between items-center border-solid border-b border-[#e9e9e9] p-[15px]">
      <div class="h-[120px] w-[120px] rounded-full border-solid border-[5px] border-[#256de5] flex justify-center items-center flex-col">
        <span class="text-[#256de5] text-2xl font-bold" @click="handleGoPerson('')">{{statistics.allConfirmCount}}</span>
        <span class="text-[#999] text-sm">全部社区</span>
      </div>
      <ul>
        <li class="flex items-center">
          <span class="flex justify-center items-center h-[32px] w-[32px] rounded-full bg-[#e9e9e9]"><img src="@/assets/index/zhongdian.svg" /></span>
          <div class="ml-2.5">
            <h1 class="text-[#256de5] text-2xl font-bold text-center" @click="handleGoPerson('重点人员')"> {{statistics.zdCount}}</h1>
            <span class="text-[#999] text-sm">重点人员</span>
          </div>
        </li>
        <li class="flex items-center my-2">
          <span class="flex justify-center items-center h-[32px] w-[32px] rounded-full bg-[#e9e9e9]"><img src="@/assets/index/wailai.svg" /></span>
          <div class="ml-2.5">
            <h1 class="text-[#256de5] text-2xl font-bold text-center" @click="handleGoPerson('外来人员')"> {{statistics.wlCount}}</h1>
            <span class="text-[#999] text-sm">外来人员</span>
          </div>
        </li>
        <li class="flex items-center">
          <span class="flex justify-center items-center h-[32px] w-[32px] rounded-full bg-[#e9e9e9]"><img src="@/assets/index/tesu.svg" /></span>
          <div class="ml-2.5">
            <h1 class="text-[#256de5] text-2xl font-bold text-center" @click="handleGoPerson('特殊人员')"> {{statistics.tsCount}}</h1>
            <span class="text-[#999] text-sm">特殊人员</span>
          </div>
        </li>
      </ul>
    </div>
    <ul class="h-[70px] flex justify-between items-center">
      <li>
        <h1 class="text-[#FFA500] text-base font-bold text-center" @click="handleGoPersonIsolateTime('1')"> {{statistics.todayFreeCount}}</h1>
        <span class="text-[#999] text-sm">今日解封</span>
      </li>
      <li>
        <h1 class="text-[#FF8C00] text-base font-bold text-center" @click="handleGoPersonIsolateTime('2')"> {{statistics.tomorrowFreeCount}}</h1>
        <span class="text-[#999] text-sm">次日解封</span>
      </li>
      <li>
        <h1 class="text-[#FF0000] text-base font-bold text-center" @click="handleGoPersonIsolate('1')"> {{statistics.IsolateCount}}</h1>
        <span class="text-[#999] text-sm">居家隔离</span>
      </li>
      <li>
        <h1 class="text-[#6B8E23] text-base font-bold text-center" @click="handleGoPersonIsolate('2')"> {{statistics.unIsolateCount}}</h1>
        <span class="text-[#999] text-sm">解除隔离</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import router from '@/router'
import dayjs from 'dayjs'
import { computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'Statistic',
  props: {
    statistics: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const statistics = computed(() => props.statistics)

    const handleGoPerson = (data: string) => {
      localStorage.setItem('home_filter_isolate_reason', data)
      router.push({path: "/person"})
    }

    const handleGoPersonIsolate = (data: string) => {
      localStorage.setItem('home_filter_isolate_status', data)
      router.push({path: "/person"})
    }

    const handleGoPersonIsolateTime = (data: string) => {
      let date = '';
      if(data == '1') {
        date = dayjs().format('YYYY-MM-DD');
      } else if(data == '2') {
        date = dayjs().add(1, 'day').format('YYYY-MM-DD');
      }
      console.log(date)
      localStorage.setItem('home_filter_isolate_endtime', date+'~'+date)
      router.push({path: "/person"})
    }

    return {
      statistics,
      handleGoPerson,
      handleGoPersonIsolate,
      handleGoPersonIsolateTime
    }
  }
})
</script>
<style lang="scss" scoped>
.container {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.15)
}
</style>
